<template>
	<view class="bg-white p-t-50" style="height: 100vh;">
		<view class="flex row-right p-r-48" >
			<view class="cost-detail flex row-center" @click="costMessage" >
				<image src="../../static/cost-icon-help.png" mode="" style="width: 40upx;height: 40upx;"  ></image>
				<view class="m-l-8">
					收费标准
				</view>
			</view>
		</view>
		<view class="" style="padding: 0 70upx;margin-top: 68upx;">
			<view class="p-b-40" style="border-bottom: 1px solid rgba(230, 224, 224, 100)">
				<view class="flex row-between bold">
					<view class="flex col-baseline">
						<text style="font-size: 72upx;">{{orderDetail.total_amount}}</text>
						<text class="xxs">元</text>
					</view>
					<view class="xl">{{orderDetail.car_name}}</view>
				</view>
				<view style="color: #A4A0A0;">
					若产生高速费、停车费和搬运费，请用户额外付
					若产生逾时等候费，请与司机按费用标准结算
				</view>
			</view>
			<view class="p-t-40">
				<view class="flex row-between">
					<view class="xxl bold">已支付</view>
					<view  class="xxl bold">{{orderDetail.advance_amount || 0}}元</view>
				</view>
				<view class="flex row-between m-t-40">
					<view class="lg ">基本路费</view>
					<view  class="lg ">{{orderDetail.transport_price || 0}}元</view>
				</view>
				<view class="flex row-between m-t-40" v-if="orderDetail.carry_price">
					<view class="lg ">搬运费用</view>
					<view  class="lg " >{{orderDetail.carry_price || 0}}元</view>
				</view>
				<view class="flex row-between m-t-40" v-if="orderDetail.carry_extra_price">
					<view class="lg ">搬运附加费用</view>
					<view  class="lg " >{{orderDetail.carry_extra_price || 0}}元</view>
				</view>
				<view class="flex row-between m-t-40" v-if="orderDetail.tip_price">
					<view class="lg ">小费</view>
					<view  class="lg " >{{orderDetail.tip_price || 0}}元</view>
				</view>
				<view class="flex row-between m-t-40"  v-if="orderDetail.extra_price">
					<view class="lg ">其他费用</view>
					<view  class="lg " >{{orderDetail.extra_price || 0}}元</view>
				</view>
				<view class="flex row-between m-t-40" v-if="orderDetail.discount_amount">
					<view class="lg ">优惠券折扣</view>
					<view  class="lg primary">-{{orderDetail.discount_amount || 0}}元</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getOrderDetail,
	} from '@/api/order';
	export default {
		data() {
			return {
				id:null,
				orderDetail:{}
			}
		},
		methods: {
			getOrderDetailFun() {
				getOrderDetail({id:this.id || 176}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.orderDetail = res.data
					}
				});
			},
			costMessage(){
				let car_id = this.orderDetail.car_id
				uni.navigateTo({
					url:'/bundle/pages/reference/reference?id=' + car_id
				})
			}
		},
		onLoad({id}) {
			this.id = id;
			this.getOrderDetailFun()
		}
	}
</script>

<style lang="scss">
	.cost-detail{
		width: 200upx;
		height: 60upx;
		border: 2upx solid rgba(236, 232, 232, 100);
		border-radius: 30upx;
		line-height: 40upx;
	}
</style>
